<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@taglib prefix="h" uri="/syzg-html"%>


<!DOCTYPE html>
<html>
<head>
<%@ include file="/base/jsp/common/CommonListTop.jsp"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>[系统管理-数据统计]</title>
<link href="${ctx}/base/css/base.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/base/css/common.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/base/css/${customTheme}.css" rel="stylesheet"
	type="text/css" />
<script src="${ctx}/base/js/base.js" type="text/javascript"></script>
<script src="${ctx}/base/js/common/FormFunction.js"
	type="text/javascript"></script>
<script src="${ctx}/baseNew/plugins/jQuery/jQuery-2.2.0.min.js"></script>
<link href="${ctx}/baseNew/bootstrap/css/bootstrap.min.css"
	rel="stylesheet">
<script src="${ctx}/baseNew/bootstrap/js/bootstrap.js"
	type="text/javascript"></script>
<link href="${ctx}/baseNew/other/css/bootstrap-datetimepicker.min.css"
	rel="stylesheet" media="screen">
<script src="${ctx}/baseNew/other/js/bootstrap-datetimepicker.js"
	type="text/javascript"></script>
<script
	src="${ctx}/baseNew/other/js/locales/bootstrap-datetimepicker.zh-CN.js"
	type="text/javascript"></script>
<link rel="stylesheet" href="${ctx}/baseNew/dist/css/AdminLTE.min.css">
<link rel="stylesheet"
	href="${ctx}/baseNew/dist/css/skins/_all-skins.min.css">
<script src="${ctx}/baseNew/other/js/bootbox.min.js"
	type="text/javascript"></script>
<link rel="stylesheet"
	href="${ctx}/baseNew/validator/css/bootstrapValidator.css" />
<script type="text/javascript"
	src="${ctx}/baseNew/validator/js/bootstrapValidator.js"></script>
<link rel="stylesheet" href="${ctx}/zenithsun/css/admin-imgList.css" />
<script src="${ctx}/base/js/echarts.js" type="text/javascript"></script>
</head>
<body class="rightBody">
	<table width="100%" class="title" border="0" cellspacing="0"
		cellpadding="0">
		<tr>
			<th><img src="${ctx}/zenithsun/images/back.png" width="26"
				height="26" alt="图标 " class="icon" /> <em class="headTips">数据统计</em>
				&gt;栏目新闻量</th>
			<th width="200"></th>
		</tr>
		<tr>
			<td align="right" colspan="2"></td>
		</tr>
	</table>
	<div id="main" style="height: 250px; width: 100%;"></div>
	<div style="text-align: center; width: 100%;">
		<input id="btnGrid" type="button" value="显示数据列表">
	</div>
	<div id="grid" style="display: none;">
		<h:table
			cssClass="table table-bordered table-hover table-striped grid"
			cssStyle="margin-bottom:-5px;" value="result">
			<h:column headerTitle="栏目名称" width="10%">
                    ${o.name}
                </h:column>
			<h:column headerTitle="图片新闻量" width="10%">
                    ${o.picTotal}
                </h:column>
			<h:column headerTitle="文字新闻量" width="10%">
                    ${o.wordTotal}
                </h:column>
			<h:column headerTitle="新闻总量" width="10%">
                    ${o.wordTotal+o.picTotal}
                </h:column>
		</h:table>
	</div>
	<%@ include file="/base/jsp/common/CommonListFoot.jsp"%>
</body>
<script type="text/javascript">
	$(function() {

		$('#btnGrid').click(function() {
			if ($(this).val() == '显示数据列表') {
				$(this).val('隐藏数据列表');
				$('#grid').show();
			} else {
				$(this).val('显示数据列表');
				$('#grid').hide();
			}
		});
		//加载图表数据
		initData();
	});
	function initData() {
		var picTotal1 = [], wordTotal1 = [], name1 = [];
		$.ajax({
			type : "post",
			url : "${ctx}/statistics/newsCounter",
			dataType : 'json',
			success : function(data) {
				for (var i = 0; i < data.length; i++) {
					picTotal1.push(data[i].picTotal);
					wordTotal1.push(data[i].wordTotal);
					name1.push(data[i].name);
				}
				drewChart(picTotal1, wordTotal1, name1);
			}
		});
	}
	function drewChart(picTotal1, wordTotal1, name1) {
		var myChart = echarts.init($("#main"));
		var option = {
			title : {
				text : ''
			},
			tooltip : {
				trigger : 'axis',
				axisPointer : { // 坐标轴指示器，坐标轴触发有效
					type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
				},
				formatter : function(params) {
					var res = params[0].name;
					res += '<br/>' + params[0].seriesName + ':'
							+ params[0].value;
					res += '<br/>' + params[1].seriesName + ':'
							+ params[1].value;
					res += '<br/>新闻总量:' + (params[0].value + params[1].value);
					return res;
				},
			},
			legend : {
				data : [ '图片新闻量', '文字新闻量' ]
			},
			grid : {
				left : '3%',
				right : '4%',
				bottom : '3%',
				containLabel : true
			},
			xAxis : [ {
				type : 'category',
				data : name1
			} ],
			yAxis : [ {
				type : 'value',
			} ],
			series : [ {
				name : '文字新闻量',
				type : 'bar',
				stack : '总量',
				barWidth : 40,
				label : {
					normal : {
						show : true,
						position : 'insideRight'
					}
				},
				data : wordTotal1
			}, {
				name : '图片新闻量',
				type : 'bar',
				stack : '总量',
				label : {
					normal : {
						show : true,
						position : 'insideRight'
					}
				},
				data : picTotal1
			} ]
		};
		myChart.setOption(option, true);
	}
</script>
</html>